<!DOCTYPE html>
<html>
<head>
<title>Particle Collision Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="400"></canvas>
<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// Clear canvas with white background
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Style settings
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// --- Helper function to draw an arrowhead ---
// The arrowheads in the image are stylized, filled shapes on the line.
// This function draws a filled, elongated triangle to represent them.
function drawArrowhead(x, y, angle) {
    const size = 12; // length of the arrowhead
    const widthFactor = 3; // controls how narrow the arrowhead is
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(angle);
    ctx.beginPath();
    ctx.moveTo(0, 0); // tip of the arrow
    ctx.lineTo(-size, -size / widthFactor);
    ctx.lineTo(-size, size / widthFactor);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}

// --- Main drawing components ---

// Coordinates and sizes
const centerX = 270;
const centerY = 200;
const centerRadius = 30;

// 1. Central Vertex (labeled ρ)
ctx.font = 'italic 22px serif';
ctx.beginPath();
ctx.arc(centerX, centerY, centerRadius, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillText('ρ', centerX, centerY - centerRadius - 20);

// 2. Incoming Pion (π)
const incomingStartX = 150;
const incomingStartY = centerY;
const incomingEndX = centerX - centerRadius;
const incomingEndY = centerY;
const incomingPionRadius = 8;

// Draw line
ctx.beginPath();
ctx.moveTo(incomingStartX, incomingStartY);
ctx.lineTo(incomingEndX, incomingEndY);
ctx.stroke();

// Draw arrowhead for incoming pion
const incomingAngle = Math.atan2(incomingEndY - incomingStartY, incomingEndX - incomingStartX);
drawArrowhead(incomingEndX - 5, incomingEndY, incomingAngle);

// Draw hollow circle for incoming pion
ctx.beginPath();
ctx.arc(incomingStartX, incomingStartY, incomingPionRadius, 0, 2 * Math.PI);
ctx.save();
ctx.fillStyle = 'white'; // Make it hollow
ctx.fill();
ctx.restore(); // Restore fillStyle to black
ctx.stroke();

// Draw label for incoming pion
ctx.fillText('π', incomingStartX - incomingPionRadius - 20, incomingStartY);


// 3. Outgoing Pion (π)
const outgoingPionEndX = 400;
const outgoingPionEndY = 120;
const outgoingPionRadius = 8;

// Calculate start point on the circle's circumference
const angle1 = Math.atan2(outgoingPionEndY - centerY, outgoingPionEndX - centerX);
const outgoingPionStartX = centerX + centerRadius * Math.cos(angle1);
const outgoingPionStartY = centerY + centerRadius * Math.sin(angle1);

// Draw line
ctx.beginPath();
ctx.moveTo(outgoingPionStartX, outgoingPionStartY);
ctx.lineTo(outgoingPionEndX, outgoingPionEndY);
ctx.stroke();

// Draw arrowhead for outgoing pion
const arrowPos1X = outgoingPionStartX + (outgoingPionEndX - outgoingPionStartX) * 0.6;
const arrowPos1Y = outgoingPionStartY + (outgoingPionEndY - outgoingPionStartY) * 0.6;
drawArrowhead(arrowPos1X, arrowPos1Y, angle1);

// Draw filled circle for outgoing pion
ctx.beginPath();
ctx.arc(outgoingPionEndX, outgoingPionEndY, outgoingPionRadius, 0, 2 * Math.PI);
ctx.fill();

// Draw label for outgoing pion
ctx.fillText('π', outgoingPionEndX + 20, outgoingPionEndY);


// 4. Outgoing Proton (p)
const outgoingProtonEndX = 380;
const outgoingProtonEndY = 290;
const outgoingProtonRadius = 15;

// Calculate start point on the circle's circumference
const angle2 = Math.atan2(outgoingProtonEndY - centerY, outgoingProtonEndX - centerX);
const outgoingProtonStartX = centerX + centerRadius * Math.cos(angle2);
const outgoingProtonStartY = centerY + centerRadius * Math.sin(angle2);

// Draw line
ctx.beginPath();
ctx.moveTo(outgoingProtonStartX, outgoingProtonStartY);
ctx.lineTo(outgoingProtonEndX, outgoingProtonEndY);
ctx.stroke();

// Draw arrowhead for outgoing proton
const arrowPos2X = outgoingProtonStartX + (outgoingProtonEndX - outgoingProtonStartX) * 0.6;
const arrowPos2Y = outgoingProtonStartY + (outgoingProtonEndY - outgoingProtonStartY) * 0.6;
drawArrowhead(arrowPos2X, arrowPos2Y, angle2);

// Draw filled circle for outgoing proton
ctx.beginPath();
ctx.arc(outgoingProtonEndX, outgoingProtonEndY, outgoingProtonRadius, 0, 2 * Math.PI);
ctx.fill();

// Draw label for outgoing proton
ctx.fillText('p', outgoingProtonEndX + 20, outgoingProtonEndY);


// 5. Caption
ctx.font = '20px Times New Roman';
ctx.fillStyle = 'black'; // Ensure caption is black
ctx.fillText('Fig. 3.20.', centerX, 360);

</script>
</body>
</html>